<!DOCTYPE HTML>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<style type="text/css">
	#editor{
		width: 360px;
		height: 200px;
		overflow-y: scroll;
		border: solid 2px #e0af43;
	}
	#ul{
		padding: 0;
		margin: 8px 0 0 0;
	}
	#ul li{
		display: inline-block;
		list-style: none;
		width: 75px;
		height: 40px;
		background: #373737;
		margin-right: 15px;
		color: #fff;
		line-height: 2.2;
	}
	span{ padding-left: 10px; margin-top: 5px;}
	</style>
	<title>Biscuit</title>
	<script type="text/javascript" src="js/jquery-1.7.js"></script>
	<script type="text/javascript">
	$(function() {
		var docs, index;
		
		$.ajax("timemachine" + location.search, {cache: false}).done(function(list) {
			docs = list;
			index = list.length - 1;
			setContent();
		});
		
		$("#first").click(function() {
			index = 0;
			setContent();
		});
		
		$("#prev").click(function() {
			index = Math.max(0, index - 1);
			setContent();
		});
		
		$("#next").click(function() {
			index = Math.min(docs.length - 1, index + 1);
			setContent();
		});

		$("#last").click(function() {
			index = docs.length - 1;
			setContent();
		});
		
		function setContent() {
			$("#editor").html(docs[index].content);
		}
	});
	</script>
</head>
<body>
	<div id="editor"></div>
	<ul id="ul">
		<li id="first"><span>First</span></li>
		<li id="prev"><span>Prev</span></li>
		<li id="next"><span>Next</span></li>
		<li id="last"><span>Last</span></li>
	</ul>
</body>
</html>